<template>
  <div class="search-app">
    <div class="search-container">
      <div class="box">
        <div class="search-box">
          <!-- 切换检索 -->
          <div class="search-tab">
            <p @click="changeTab(0)" :class="{active: activeIndex===0}">智能检索</p>
            <p @click="changeTab(1)" :class="{active: activeIndex===1}">高级检索</p>
            <p @click="changeTab(2)" :class="{active: activeIndex===2}">专业检索</p>
            <p @click="changeTab(3)" :class="{active: activeIndex===3}">语义检索</p>
            <p @click="changeTab(4)" :class="{active: activeIndex===4}">查新检索</p>
            <p @click="changeTab(5)" :class="{active: activeIndex===5}">无效检索</p>
          </div>
          <!-- 智能检索 -->
          <div v-show="activeIndex===0||activeIndex===2" class="search-bar-box">
            <!-- 数据源 -->
            <span class="data-source" @click="openDataSource">
              <i class="icon"></i>
            </span>
            <!-- 检索框 -->
            <div class="search-bar">
              <div class="search-inp">
                <!-- 
                  @input="changeInput" @focus="changeFocus" @blur="changeBlur" -->
                <el-input v-model="searchTxt" type="text" placeholder="请输入关键词" 
                  @input="handleInput"
                  @keyup.enter.native="search"
                  style="'background-color':transparent"/>
              </div>
            </div>
            <span class="search-btn" @click="search">
              <i class="icon iconfont icon-sousuo"></i>
            </span>
            
            
            <!-- 智能检索-检索提示 -->
            <div v-if="activeIndex===0" class="search-tips-box">
              <SmartSearchTips :searchTxt="searchTxt" @chooseTips="chooseTips"/>
            </div>
            
            <!-- 专业检索-检索提示 -->
            <div v-if="activeIndex===2" class="search-tips-box">
              <ProfessionalSearchTips :searchTxt="searchTxt" @chooseTips="chooseTips" @chooseTips2="chooseTips2"/>
            </div>
            
          </div>
          <!-- 高级检索 -->
          <AdvancedSearch v-show="activeIndex===1"/>
          <!-- 语义检索 -->
          <SemanticSearch v-show="activeIndex===3"/>
          <!-- 查新检索 -->
          <NewSearch v-show="activeIndex===4"/>
          <!-- 无效检索 -->
          <Invalid v-show="activeIndex===5"/>
        </div>
        <p  v-show="activeIndex===0||activeIndex===2" class="tips">可以输入公司、发明（设计）人、关键词、分类号或专利号进行检索。且支持所有布尔检索字段</p>
        <!-- 专利动态 -->
        <!-- <div v-if="activeIndex===0" @click="toDynamic($event)" class="patent-dynamic-box">
          <h4>专利动态</h4>
          <vueSeamlessScroll :data="patentDynamic" class="scroll-box" :class-option="scrollOption">
            <ul class="dynamic-list">
              <li v-for="(item, index) in patentDynamic" :key="index" >
                <h4 :data-pn="item.pn">{{item.title}}</h4>
                <span class="keyword">{{item.topic}}</span>
              </li>
            </ul>
          </vueSeamlessScroll>
        </div> -->
      </div>
    </div>
    <!-- 选择数据源 -->
    <DataSource ref="dataSource"/>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import DataSource from '../DataSource'
import SmartSearchTips from '../components/SmartSearchTips'
import ProfessionalSearchTips from '../components/ProfessionalSearchTips'
import AdvancedSearch from './AdvancedSearch.vue'
import SemanticSearch from './SemanticSearch'
import NewSearch from './NewSearch'
import Invalid from './Invalid'
// 插件：列表滚动
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  components: {
    DataSource,
    SmartSearchTips,
    ProfessionalSearchTips,
    AdvancedSearch,
    SemanticSearch,
    NewSearch,
    Invalid,
    vueSeamlessScroll
  },
  data() {
    return {
      searchTxt: '',
      activeIndex: 0,
      isShowInfo: false,
      patentDynamic: [],
      smartSearchTipsCancel: null
    }
  },
  computed: {
    ...mapState(['searchWord', 'highlightKeyWords', 'highlightModeSettings']),
    scrollOption() {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: this.patentDynamic.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  methods: {
    init() {
      let token = this.$route && this.$route.token
      if (token) {
        // 存token
        this.$cookie.set("token", data.data);
        // 用户名
        let realName = jwt.decode(data.data).name;
        this.$cookie.set("realName", realName);
      }
      // this.getTopicList()
    },
    // 获取专利动态
    getTopicList() {
      this.$get(this.$Url.patentDynamic.pnListByTopic, {
        ipi: 1,
        ips: 10
      }).then(res => {
        let result = res.data && res.data.result || []
        this.patentDynamic = result
      }).catch(err => {})
    },
    // 切换检索
    changeTab(index) {
      this.activeIndex = index
      this.$router.push({
        name: 'PLBasicSearch',
        query: {
          way: index
        }
      })
    },
    search() {
      if (this.searchTxt === '') {
        this.$message({
          type: 'error',
          message: '检索不能为空！',
          duration: 1000
        })
        return
      }
      this.$store.commit('setSearchWord', this.searchTxt)
      if (this.activeIndex !== 1) { // 如果不是高级检索，则关闭高级检索的open
        this.$store.commit('setHighlightKeyWords', {
          modes: [],
          open: false
        })
      }
      this.$nextTick(() => {
        this.$router.push({
          name: 'PLSearchResult'
        })
      })
    },
    handleInput() {
      if (this.searchTxt === '') {
        return
      }
    },
    // 获取焦点
    // changeFocus() {
    //   if (this.searchTxt === '') {
    //     this.isShowInfo = true
    //   }
    // },
    // 失焦
    // changeBlur() {
    //   setTimeout(() => {
    //     this.isShowInfo = false
    //   }, 200)
    // },
    // 选择tips
    chooseTips({key, isSearch}) {
      this.searchTxt = key
      if (isSearch) this.search()
    },
    chooseTips2({item, isSearch}) {
      // 截取示例后面的检索式
      let str = item.value
      let dom = document.createElement('span')
      dom.innerHTML = str
      document.body.append(dom)
      let txt = dom.innerText
      let arr = txt.split('示例：')
      document.body.removeChild(dom)
      this.searchTxt = arr[arr.length - 1]
      if (isSearch) this.search()
    },
    // 选择数据源
    openDataSource() {
      this.$refs.dataSource.init()
    },
    toDynamic(e) {
      let pn = e.target.dataset.pn
      if (pn) {
        let url = this.$router.resolve({
          name: 'PLDetail',
          query: {
            pn,
            list: 'no'
          }
        })
        window.open(url.href, '_blank')
      }
    },
    toDynamic2(item) {
      this.$store.commit('setTopicType', item.topic)
      window.open('patentDynamic.html', '_blank')
    },
    getCurrentWay() {
      let way = this.$route.query.way || 0
      this.activeIndex = Number(way)
    }
  },
  watch: {
    searchWord() {
    },
    searchTxt() {
      // 防抖
      if (this.time) {
        clearTimeout(this.time)
      }
      this.time = setTimeout(() => {
        if (this.searchTxt === '') {
          return
        }
      }, 600)
    },
    '$route.query.way'() {
      this.getCurrentWay()
    }
  },
  beforeMount() {
    this.getCurrentWay()
  },
  mounted() {
    // this.searchTxt = this.searchWord
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.search-app {
  position: relative;
  width: 100%;
  height: calc(100vh - .7rem);
  background: url(../../../../../assets/img/PS/search-bg.jpg) no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  .search-container {
    position: relative;
    width: 100%;
    height: calc(100vh - .7rem);
    .box {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      margin: -160px auto 0;
      // padding-top: 1rem;
      // padding-bottom: 1rem;
    }
  }
  .search-box {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 683px;
    // min-width: 700px;
    // max-width: 1000px;
    margin: 0 auto;
    .search-tab {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-left: 12px;
      p {
        position: relative;
        width: 96px;
        line-height: 54px;
        margin: 0;
        text-align: center;
        font-size: 16px;
        color: $color10;
        cursor: pointer;
        &.active {
          font-weight: 600;
          color: $mainColor;
        }
        &:after {
          position: absolute;
          top: 50%;
          right: 0;
          width: 1px;
          height: 20px;
          margin-top: -10px;
          background-color: $color143;
          content: '';
        }
        &:last-of-type {
          &:after {
            content: none;
          }
        }
      }
    }
    .search-bar-box {
      position: relative;
      border: 2px solid $mainColor;
      border-radius: 30px;
      .data-source {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80px;
        height: 100%;
        line-height: 56px;
        text-align: center;
        cursor: pointer;
        &:after {
          position: absolute;
          top: 50%;
          right: 0;
          width: 1px;
          height: 20px;
          margin-top: -10px;
          background-color: $color148;
          content: '';
        }
        .icon {
          display: inline-block;
          width: 20px;
          height: 20px;
          color: $color141;
          background: url(../../../../assets/img/PS/data-source-icon.png) no-repeat center center;
          background-size: auto 100%;
        }
      }
      .search-bar {
        display: block;
        padding-left: 80px;
        padding-right: 86px;
        height: 60px;
        border-radius: 30px;
        background-color: $color2;
        .search-inp {
          flex: 1;
          height: 60px;
          line-height: 60px;
          ::v-deep {
            .el-input {
              display: block;
            }
            .el-input__inner {
              border: 0;
            }
          }
          input {
            width: 100%;
            line-height: 40px;
            font-size: 14px;
            border: none;
            outline: none;
          }
        }
      }
      .search-btn {
        position: absolute;
        top: -2px;
        right: -1px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 86px;
        height: 64px;
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;
        text-align: center;
        cursor: pointer;
        background-color: $mainColor;
        .icon {
          width: 40px;
          height: 40px;
          line-height: 40px;
          font-size: 28px;
          color: $color2;
        }
      }
      .search-tips-box {
        position: relative;
      }
    }
    
  }
  .tips {
    width: 100%;
    margin-top: 24px;
    margin-bottom: 10px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: $color10;
  }
  .patent-dynamic-box {
    position: relative;
    width: 683px;
    padding-bottom: 20px;
    margin: 0 auto;
    > h4 {
      line-height: 40px;
      margin-bottom: 10px;
      text-align: center;
      font-size: 16px;
      color: $color10;
    }
  }
  // .patent-dynamic {
  //   position: relative;
  //   display: flex;
  //   width: 100%;
  //   dd {
  //     flex:1;
  //     margin: 0 20px;
  //     border: 1px solid #ebeef5;
  //     box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  //     background-color: rgba(255, 255 ,255, 0.8);
  //     h4 {
  //       text-align: center;
  //     }
  //     p {
  //       position: relative;
  //       padding: 0 20px 10px 30px;
  //       cursor: pointer;
  //       &:before {
  //         position: absolute;
  //         top: 8px;
  //         left: 14px;
  //         width: 4px;
  //         height: 4px;
  //         border-radius: 50%;
  //         background-color: #222222;
  //         content: '';
  //       }
  //       &:hover {
  //         text-decoration: underline;
  //       }
  //     }
  //   }
  // }
  .scroll-box {
    position: relative;
    max-height: calc((29px * 10));
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    background-color: rgba(255, 255 ,255, 0.3);
    overflow: hidden;
  }
  .dynamic-list {
    position: relative;
    padding-left: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    // padding-top: 10px;
    // border: 1px solid #ebeef5;
    li {
      position: relative;
      display: flex;
      justify-content: space-between;
      padding: 0 27px 10px;
      font-size: 14px;
      // &:before {
      //   position: absolute;
      //   top: 6px;
      //   left: 14px;
      //   width: 4px;
      //   height: 4px;
      //   border-radius: 50%;
      //   background-color: #222222;
      //   content: '';
      // }
      h4 {
        // flex: 1;
        padding-right: 10px;
        margin-top: 0;
        margin-bottom: 0;
        font-weight: normal;
        font-size: 14px;
        color: $color143;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        &:hover {
          text-decoration: underline;
        }
      }
      .keyword {
        // max-width: ;
        font-weight: bold;
        color: $mainColor;
        // cursor: pointer;
      }
    }
  }
}
</style>